<template>
  <div id="box">
    <el-row class="tac">
      <el-col :span="8" style="border: 1px">
        <el-row style="margin-bottom: 30px">
          <i class="el-icon-goods" style="font-size: 20px"> {{ newRecent.ownerName }} 的动态详情</i>
        </el-row>

        <!-- 动态人名称 -->
        <el-col>
        <el-row :span="24">
          <div class="grid-content bg-purple" style="font-size:22px">
            {{ newRecent.ownerName }}
          </div>
        </el-row>
        </el-col>

        <!-- 动态配图 -->
        <el-row>
          <el-image :src="newRecent.image" style="width: 100%;border-radius:15px">
            <div slot="error" class="image-slot">
              <div slot="error">
                <img
                  src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2165691866,2570924737&fm=26&gp=0.jpg"
                  width="100% "/>
              </div>
            </div>
          </el-image>
        </el-row>

        <!-- 动态内容 -->
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark" style="text-align:left;height:30px">
              <span style="font-size:18px"><b>动态内容：</b></span>
              <span style="font-size:18px">{{ newRecent.content }}</span>
            </div>
          </el-col>
        </el-row> 

        <!-- 动态的点赞数 -->
        <el-col :span="24">
          <div class="grid-content bg-purple-light" style="text-align:left;height:10px">
            <span style="font-size:18px"><b>点赞人数：</b></span>
            <span style="font-size:18px">{{ newRecent.agreeNum }}</span>
          </div>
        </el-col>

        <!-- 动态时间 -->
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-light" style="text-align:left;height:10px">
                  <span style="font-size:18px"><b>发布时间：</b></span>
                  <span style="font-size:18px">{{ newRecent.time }}</span>
                </div>
            </el-col>
        </el-row>
      </el-col>

      


 <!-- 展示评论 -->
      <el-col :span="15"
              style="border:1px">
        <el-row style="margin-bottom:30px;margin-left:10px">
          <i class="el-icon-document"
             style="font-size:20px">动态评论</i>
        </el-row>

        <el-table :data="newComment2" style="width: 100%;margin-left:10px" max-height="60%">
          <el-table-column label="评论者" prop="name"></el-table-column>
          <el-table-column label="评论时间" prop="time"></el-table-column>
          <el-table-column label="评论内容" prop="content"></el-table-column>
        </el-table>
      </el-col>


<!-- 添加评论 -->
      <el-col :span="15" style="margin-left:15px;margin-top:15px" >
        <el-row style="margin-bottom:15px">
          <i class="el-icon-edit" style="font-size:20px">添加评论</i>
        </el-row>
        <el-input type="textarea"
            :autosize="{ minRows: 2, maxRows: 6}"
            placeholder="请输入内容"
            v-model="newComment" style="min-height:70px;height80px" >
        </el-input>
        <el-button type="primary" @click="onSubmit">添加</el-button>
      </el-col>
    </el-row>

    <!-- <div style="width: 40%"></div> -->

    <div id="btn">
      <el-button type="primary" @click="commit">确 定</el-button>
    </div>
  </div>
  
</template>
<script>
    import http from '../../../axios_config'

export default {
    props: {
        recent: {}
    },
    //当组件创建完毕后自动调用此方法
    created() {
      this.getCommentNow();
      console.log(this.recent);
        this.newRecent = this.recent;

        console.log(this.newRecent);
        
    },
    data() {
        return {
        newRecent: {
            image:'',
            content:'',
            ownerName:'',
            time:'',
            agreeNum:''
        },
        newComment:'',
        newComment2:[],
        
        };
    },
    methods: {
      //查询当前动态评论
      getCommentNow(){
        http.get("http://192.168.11.18:8080/recentcomment/singleComment?rid=" + this.recent.recentId)
      .then(res => {
        this.newComment2 = res.data;
      })
      },
         //通知父组件关闭对话框
        commit() {
            this.$emit("closedialog");
        },

        //回复按钮方法,新增评论
        onSubmit() {
          //封装为对象传递后端
          let parms = new URLSearchParams();
            parms.append("content",this.newComment),

        http.post("http://192.168.11.18:8080/recentcomment/addcomment",parms+"&rid="+this.newRecent.recentId
        +"&uid="+this.newRecent.commentList[0].uid)
        .then(res => {
            if(res.status == 200){
         this.$message({
            showClose: true,
            message: '新增成功',
            type: 'success'
          });
          this.getCommentNow();
        } else {
          this.$message({
            showClose: true,
            message: '新增失败，请稍后再试',
            type: 'warning'
          });
        } 
        })

        },
    },
    };
</script>

<style scoped>
    div{
      /* border: 1px red solid; */
    }
    #btn{
      margin-left: 1000px;
      margin-top: 20px;
    }
    
    el-row {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    .el-col {
        border-radius: 10px;
    }
    .grid-content {
        border-radius: 25px;
        min-height: 40px;
        text-align: center;
        line-height: 35px;
        margin: 10px;

    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .el-table__empty-block{
       height: 0;
       width: 0; 
      }

</style>